<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <script th:src="@{/js/jquery-3.3.1.min.js}" charset="utf-8"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 10px;">
                <!-- 数据表格 -->
                <table id="munu-table" lay-filter="munu-table" class="layui-table" ></table>
            </div>
        </div>
    </div>
</div>


<!--表格头-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除多个 </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" > 添加 </button>
        <button class="layui-btn layui-btn-sm">导入</button>
        <button class="layui-btn layui-btn-sm">导出</button>
    </div>
</script>

<!--表格右边的操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--</div>-->
<script th:inline="none">//treeTable要设置为none

layui.use(['table','treetable','layer'],function () {

    var treeTable = layui.treetable;

    var table = layui.table;

    treeTable.render({
        elem: '#munu-table'
        ,url:'/dict/list'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,treeColIndex: 1   //层级关系展示在第几列
        ,treeSpid: 0      //是数据库表父级第一级的值
        ,treeIdName: 'did'  //每条数据id 字段
        ,treePidName: 'parentId'  //每天数据父id字段
        ,treeDefaultClose:true  //不展示节点
        ,cols: [[
            {type:'checkbox'} //开启复选框
            ,{field:'dname', width:'25%', title: '名称'}
            ,{field:'createTime', width:'25%', title: '创建时间'}
            ,{field:'updateTime', width:'25%', title: '修改时间'}
            //与上面的操作进行绑定
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width: '25%'}
        ]]
        ,page:true
        ,done: function () {
            layer.closeAll('loading');
        }
    });

    //监听表格工具栏事件
    //监听table中lay-filter为userTable
    table.on('tool(munu-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if(layEvent === 'del'){ //查看
            layer.confirm('确定要删除吗?', function(index){
                $.ajax({
                    url: "dict/"+data.id,
                    method:"delete",
                    dataType:'json',
                    success: function(data){
                        if(data.code==0){
                            layer.alert(data.msg);
                            table.reload('test');
                        }else{
                            layer.alert("操作失败");
                        }
                    }
                })
            });
        }else if(layEvent==='edit'){
            var index = layer.open({
                title: '修改',
                type: 2,
                shade: 0.5,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '100%'],
                content:'dict/updateUI?id='+data.id
            });
        }
    });

    //注意：监听器一定要给元素设置  lay-filter
    table.on('toolbar(munu-table)',function(data){
        if(data.event=='add'){
            var index = layer.open({
                title: '添加',
                type: 2,
                shade: 0.5,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '100%'],
                content:'dict/addUI'
            });
        }
    });
})
</script>
</body>
</html>